<template>
  <div id="el_input_text">
    <el-input v-model="name" style="width: 250px; height: 33px; margin-top: 10px; margin-right: 30px" @keyup.enter="loadGet" id="el_input" suffix-icon="Pointer" size="small" placeholder="请输入搜索内容"/>
    <el-select v-model="sex" placeholder="请输入性别" style="width: 240px; padding-top: 10px">
      <el-option
          v-for="item in sexs"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
    <el-button type="success" class="el_button_input" @click="loadGet">搜索</el-button>
    <el-button type="danger" class="el_button_input" @click="restParam">重置</el-button>
    <el-button type="success" class="el_button_input" @click="addParam">新增</el-button>
  </div>
  <el-alert v-if="alertIf" type="error" id="el_alert">加载失败</el-alert>
  <div id="el_table_1">
    <el-table :data="tableData">
      <template #default="scope">
        <el-table-column fixed prop="account" label="账号" width="300vw" />
        <el-table-column prop="name" label="姓名" width="200vw" />
        <el-table-column prop="age" label="年龄" width="200vw" />
        <el-table-column prop="sex" label="性别" width="200vw" >
          <template v-slot="{row}">
            <el-tag
                :type="row.sex === 1 ? 'primary' : 'success'">{{row.sex === 1 ? "男" : "女"}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="roleId" label="权限" width="200vw">
          <template v-slot="{row}">
            <el-tag
                :type="row.roleId === 0 ? 'danger' : (row.roleId === 1 ? 'primary' : 'success')">
              {{row.roleId === 0 ? "超级管理员" : (row.roleId === 1 ? "管理员" : "普通用户")}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="300vw" />
        <el-table-column prop="" label="操作" width="300vw" >
          <template v-slot="{row}">
            <el-button :type="'primary'" @click="redact(row)">编辑</el-button>
            <el-button :type="'danger'" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>

<!--  分页按钮-->
  <div id="demo_pagination">
    <el-pagination
        v-model:current-page="pagination.currentPage"
        :page-size="10"
        :disabled="false"
        :background="true"
        :total="pagination.total"
        @current-change="handleCurrentChange"
    />
  </div>

<!--  新增对话框-->
  <el-dialog v-model="addParam1" title="新增成员" width="500" draggable>
    <ElDialogOne/>
  </el-dialog>

<!--  编辑对话框-->
  <el-dialog v-model="redactDate.isRedact" title="信息修改" width="500" draggable>
    <RedactButton :from="redactDate.data" @isRedact="isRedacting"/>
  </el-dialog>

<!--  删除对话框-->
  <el-dialog v-model="delData.isDel" title="删除" width="400" align-center>
    <DeleteDialog :account="delData.account" @delData="delClose"/>
  </el-dialog>

</template>

<script>
  import '../assets/main.css'
  import axios from "axios";
  import {ArrowDown, Plus, Pointer} from "@element-plus/icons-vue";
  import ElDialogOne from "@/components/ElDialog.vue";
  import RedactButton from "@/components/RedactButton.vue";
  import DeleteDialog from "@/components/DeleteDialog.vue";

  export default {
    components: {DeleteDialog, RedactButton, ArrowDown, Plus, Pointer, ElDialogOne},
    data(){
      return{
        // 删除按钮对话框
        delData:{
          isDel:false,
          account:""
        },
        tableData:null,
        alertIf: false,
        // pagination组件信息
        pagination:{
          currentPage: 1,
          total: 100
        },
        // 搜索框内容
        name:'',
        sex:"2",
        sexs:[{
          value:'1',
          label:'男'
        },{
          value: '0',
          label:'女'
        },{
          value: '2',
          label: '所有人'
        }
        ],
        // 是否打开新增对话框
        addParam1:false,
        // 编辑按钮集合
        redactDate:{
          // 是否打开编辑对话框
          isRedact:false,
          // 这一行数据
          data:""
        }
      }
    },
    methods:{
      // 加载页面数据
      loadGet(){
        try {
          axios.post('http://localhost:8090/user/listPage',{
            "pageNum":this.pagination.currentPage,
            "name":this.name,
            "sex":this.sex
          }).then(res=>{
            if (!res.data.success){
              // 是否显示错误
              this.alertIf = true;
            }
            // 数据传输
            this.tableData = res.data.data;
            this.pagination.total = res.data.total;
          })
        } catch (e){
          console.log("错误",e);
          this.alertIf = true;
        }
      },
      // 当分页发生改变时
      handleCurrentChange(){
        this.loadGet()
      },
      // 重置
      restParam(){
        this.name = ''
        this.sex = '2'
        this.loadGet();
      },
      // 新增
      addParam(){
        this.addParam1 = true;
      },

      // 编辑按钮
      redact(row){
        // 获取行数据，并展示对话框
        this.redactDate.data = row;
        // 将数字转为字符串，不然显示会出问题
        this.redactDate.data.sex = row.sex.toString();
        this.redactDate.data.roleId = row.roleId.toString();
        // 是否打开展示页面
        this.redactDate.isRedact = !this.redactDate.isRedact;
      },

      // 删除按钮
      del(row){
        this.delData.account = row.account;
        this.delData.isDel = !this.delData.isDel;
      },

      // 编辑子组件传回关闭信息
      isRedacting(item){
        this.redactDate.isRedact = item;
        console.log(this.redactDate.isRedact)
      },

      // 删除窗口返回关闭信息
      delClose(item){
        this.delData.isDel = item;
      }
    },
    mounted() {
      this.loadGet();
    },
    updated() {
      this.loadGet();
    }
  }
</script>